Pemuatan Sumber Daya yang Tangguh di React: Menguasai Error Boundary dengan Hooks

Dalam aplikasi web modern, memuat sumber daya secara asinkron adalah praktik yang umum. Baik itu mengambil data dari API, memuat gambar, atau mengimpor modul, menangani potensi kesalahan selama pemuatan sumber daya sangat penting untuk pengalaman pengguna yang lancar. React Error Boundary menyediakan mekanisme untuk menangkap kesalahan JavaScript di mana pun dalam pohon komponen turunannya, mencatat kesalahan tersebut, dan menampilkan UI fallback alih-alih merusak seluruh aplikasi. Artikel ini membahas cara menggunakan Error Boundary secara efektif bersama dengan React Hooks untuk mengelola kesalahan pemuatan sumber daya.

Memahami Error Boundary

Sebelum React 16, kesalahan JavaScript yang tidak tertangani selama rendering komponen akan merusak state internal React dan menyebabkan kesalahan yang tidak jelas pada render berikutnya. Error Boundary mengatasi ini dengan bertindak sebagai blok penangkap semua untuk kesalahan yang terjadi pada komponen turunannya. Mereka adalah komponen React yang mengimplementasikan salah satu atau kedua metode siklus hidup berikut:

• static getDerivedStateFromError(error): Metode statis ini dipanggil setelah kesalahan dilemparkan oleh komponen turunan. Ia menerima kesalahan yang dilemparkan sebagai argumen dan mengembalikan nilai untuk memperbarui state komponen.
• componentDidCatch(error, info): Metode siklus hidup ini dipanggil setelah kesalahan dilemparkan oleh komponen turunan. Ia menerima kesalahan yang dilemparkan sebagai argumen, serta objek yang berisi informasi tentang komponen mana yang melemparkan kesalahan. Anda dapat menggunakannya untuk mencatat informasi kesalahan.

Penting untuk diketahui, Error Boundary hanya menangkap kesalahan pada fase rendering, dalam metode siklus hidup, dan dalam konstruktor dari seluruh pohon di bawahnya. Mereka tidak menangkap kesalahan untuk:

• Penangan event (pelajari lebih lanjut di bagian di bawah)
• Kode asinkron (misalnya, callback setTimeout atau requestAnimationFrame)
• Server-side rendering
• Kesalahan yang dilemparkan di dalam Error Boundary itu sendiri (bukan pada turunannya)

Error Boundary dan React Hooks: Kombinasi yang Kuat

Meskipun komponen kelas secara tradisional digunakan untuk mengimplementasikan Error Boundary, React Hooks menawarkan pendekatan yang lebih ringkas dan fungsional. Kita dapat membuat hook useErrorBoundary yang dapat digunakan kembali yang merangkum logika penanganan kesalahan dan menyediakan cara yang mudah untuk membungkus komponen yang mungkin melemparkan kesalahan selama pemuatan sumber daya.

Membuat Hook useErrorBoundary Kustom

Berikut adalah contoh hook useErrorBoundary:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Penjelasan:

• useState: Kami menggunakan useState untuk mengelola state kesalahan. Ini pada awalnya mengatur kesalahan ke null.
• useCallback: Kami menggunakan useCallback untuk melakukan memoize pada fungsi resetError dan captureError. Ini adalah praktik yang baik untuk mencegah render ulang yang tidak perlu jika fungsi-fungsi ini diteruskan sebagai props.
• Komponen ErrorBoundary: Ini adalah komponen fungsional yang dibuat dengan useCallback yang mengambil children dan prop fallback opsional. Jika ada kesalahan dalam state, ia akan me-render komponen fallback yang disediakan atau pesan kesalahan default. Jika tidak, ia akan me-render children. Ini bertindak sebagai Error Boundary kita. Array dependensi `[error]` memastikan komponen ini di-render ulang saat state `error` berubah.
• Fungsi captureError: Fungsi ini digunakan untuk mengatur state kesalahan. Anda akan memanggilnya di dalam blok try...catch saat memuat sumber daya.
• Fungsi resetError: Fungsi ini membersihkan state kesalahan, memungkinkan komponen untuk me-render ulang turunannya (berpotensi mencoba kembali pemuatan sumber daya).

Mengimplementasikan Pemuatan Sumber Daya dengan Penanganan Kesalahan

Sekarang, mari kita lihat bagaimana menggunakan hook ini untuk menangani kesalahan pemuatan sumber daya. Pertimbangkan komponen yang mengambil data pengguna dari sebuah API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Gagal memuat data pengguna. Coba lagi